/* eslint-disable */
import React, {Component, Fragment} from 'react'
import {Form, Input, Card, DatePicker, Upload, Button, Icon, Select} from 'antd';
import './title.css'


const {RangePicker} = DatePicker;
const {Option} = Select;

//日历点击选择时间
function onChange(date, dateString) {
    console.log(date, dateString);
}

function handleChange(value) {
    console.log(value)
}


class Title extends React.Component {
    constructor() {
        super();
        this.getAnswerValue = this.getAnswerValue.bind(this)
        this.state = {
            type: 1,//定义状态 1代表问答题 2 单选 3：多选
            projectName: '',
            list: [],
            temp: '',
            questionValue:1,
        };

    }
    inputOnBlur=()=>{
        debugger
    }

    changeName = e => {
        this.setState({projectName: e.target.value});
    };

    //点击新增问题内容出现新的列表 type:1
    addQuestion(e) {

        let list = this.state.list
        this.setState({
            list: [...list, {id: list.length, type: 1}]
        })
    }

    //点击新增单选渲染新的列表 type：2
    addSingal(e) {
        const list = this.state.list
        this.setState({
            list: [...list, {id: list.length, type: 2}]
        })
    }

    //监听questi中的input值
    getAnswerValue(e) {
        console.log(e.target.value)
        let value = e.target.value;
        value = value.replace(/[^\d/a-zA-Z]/g, '');
        this.setState({
            questionValue:value
        })
    }


    //点击自身减少自己的索引
    reduceContent(index) {
        let list = this.state.list
        list.splice(index, 1)
        this.setState({
            list: list
        })
    }

    render() {
        return (
            <Fragment>
                <Card title="重点访问对象">
                    <Form>
                        <Form.Item label="项目名称">
                            <Input placeholder="请输入你的项目调查标题" onChange={(e) => this.changeName(e)}/>
                        </Form.Item>
                        <Form.Item label="回访周期">
                            <RangePicker onChange={onChange}/>
                        </Form.Item>
                        <Form.Item label="客户信息">
                            <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
                                <Button>
                                    <Icon type="home"/> 上传文件
                                </Button>
                            </Upload>
                        </Form.Item>

                        <Form.Item label="回访前尽职调查">
                            <Button type="primary" className='question-button' onClick={(e) => this.addQuestion(e)}>
                                添加问答
                            </Button>
                            <Button type="primary" className='question-button' onClick={(e) => this.addSingal(e)}>
                                添加单选
                            </Button>
                            <Button type="primary" className='question-button'>
                                添加多选
                            </Button>
                            {
                                this.state.list.map((item, index) => {
                                    return (
                                        <div className='container'>
                                            {item.type === 1 &&
                                            <div className='question'>
                                                <div className='question-title'
                                                     key={item.index}
                                                >问题{index + 1}:
                                                </div>
                                                <div className='question-input'>
                                                    <input className='input' value={this.state.questionValue} onChange={()=>this.addQuestion()} onBlur={this.inputOnBlur} />
                                                </div>
                                                <div className='question-select'>
                                                    (问答题)
                                                </div>
                                                <div className='danger'>
                                                    <div onClick={() => {
                                                        this.reduceContent(index)
                                                    }}>删除
                                                    </div>
                                                </div>
                                            </div>
                                            }
                                            {item.type === 2 &&
                                            <div className='choose'>
                                                <div className='choose-main'>
                                                    <div className='question-title' key={item.index}>问题{index + 1}:
                                                    </div>
                                                    <div className='question-input'><input className='input'
                                                                                           value={this.state.questionValue}
                                                    />
                                                    </div>
                                                    <div
                                                        className='question-select'>{item.type === 2 ? '(单选题)' : '(多选题)'}</div>
                                                    <div className='choose-danger'>
                                                        <div data-id={index < 0 ? 0 : index}
                                                             onClick={(index) => this.reduceContent(index)}>删除
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className='option'>
                                                    <span className='desc'>添加选项:</span> <input className='addInput'/>
                                                </div>
                                                <div className='option'>
                                                    <span className='desc'>添加选项:</span> <input className='addInput'/>
                                                </div>
                                                <div className='option'>
                                                    <span className='desc'>添加其他选项</span>
                                                </div>
                                            </div>
                                            }
                                        </div>
                                    )
                                })
                            }
                        </Form.Item>
                    </Form>
                </Card>
            </Fragment>
        )

    }


}

export default Title
